<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title="对公提现申请"
    ></u-navbar>
    <view class="content">
      <view class="formBox">
        <u-form :model="formModel" ref="uForm" :label-width="280">
          <u-form-item label="提现金额">
            <u-input
              v-model="formModel.corporateName"
              input-align="right"
              placeholder="请输入提现金额"
            />
          </u-form-item>
          <u-form-item label="到账/开票金额">
            <u-input
              v-model="formModel.price"
              input-align="right"
              placeholder="请输入到账/开票金额"
            />
          </u-form-item>
          <u-form-item label="税点">
            <u-input
              v-model="formModel.taxPoint"
              input-align="right"
              placeholder="请选择税点"
              @click="handleTaxPointPicker"
            />
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="收款企业">
            <u-input
              v-model="formModel.receivingEnterprise"
              input-align="right"
              placeholder="请选择收款企业"
              @click="handleReceivingEnterprisePicker"
            />
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="企业信息">
            <u-input
              v-model="formModel.enterpriseInformation"
              input-align="right"
              placeholder="请输入企业信息"
            />
          </u-form-item>
        </u-form>
      </view>

      <view class="section">
        <view class="section-in">
          <view class="title">
            <view class="title-in"
              ><text>发票寄送地址</text>
              <image
                class="title-sign"
                src="/static/images/icon-tzgg.png"
                mode="widthFix"
              ></image
            ></view>
          </view>
          <view class="detail"
            >福建省福州市台江区光大路国际大厦D座12-605华北平原股份有限公司，张三三，129038910238（若为电子发票无需邮寄，发送至邮箱:hbpygfyxsg@hb.com</view
          >
        </view>
      </view>

      <view class="section">
        <view class="section-in">
          <view class="title">
            <view class="title-in"
              ><text>开票信息</text>
              <image
                class="title-sign"
                src="/static/images/icon-tzgg.png"
                mode="widthFix"
              ></image
            ></view>
          </view>
          <view class="detail"
            >福建省福州市台江区光大路国际大厦D座12-605华北平原股份有限公司，张三三，129038910238（若为电子发票无需邮寄，发送至邮箱:hbpygfyxsg@hb.com</view
          >
        </view>
      </view>
    </view>

    <view class="bottomBtn">
      <view class="bottomBtn-in" @click="handleWithdrawal">提现</view>
    </view>
    <u-picker mode="selector" v-model="showTaxPoint" :range="taxPointRange"></u-picker>
    <u-picker
      mode="selector"
      v-model="showReceivingEnterprise"
      :range="receivingEnterpriseRange"
    ></u-picker>
  </view>
</template>
<script>
export default {
  data() {
    return {
      action: '',
      formModel: {
        amount: '',
        price: '',
        taxPoint: '',
        receivingEnterprise: '',
        enterpriseInformation: '',
      },
      showTaxPoint: false,
      showReceivingEnterprise: false,
      taxPointRange: [1, 2, 3],
      receivingEnterpriseRange: [1, 2, 3],
    };
  },
  onLoad() {},
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    handleTaxPointPicker() {
      this.showTaxPoint = true;
    },
    handleReceivingEnterprisePicker() {
      this.showReceivingEnterprise = true;
    },
    handleWithdrawal() {},
    onUploadedInvoice(lists, name) {
      let filePath = lists[0].response.data[0].filePath;
      this.formModel.invoice = filePath;
    },
    onRemoveInvoice(index, lists, name) {
      this.formModel.invoice = '';
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  padding: 0 0 60rpx;
  text-align: center;
  background-color: #f5f5f5;
}

.content {
  position: relative;
  width: 100%;
  padding: 30rpx 30rpx;
  .formBox {
    width: 100%;
    padding: 0 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
  }
}

.section {
  position: relative;
  margin-top: 30rpx;
  width: 100%;
  height: auto;
  padding: 0;
  z-index: 99;
  .section-in {
    width: 100%;
    height: auto;
    padding: 30rpx;
    background: #ffffff;
    border-radius: 20rpx;
  }
  .title {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .title-in {
      position: relative;
      display: inline-block;
      text {
        position: relative;
        font-weight: 800;
        font-size: 28rpx;
        color: #333333;
        z-index: 9;
      }
      .title-sign {
        position: absolute;
        top: -10rpx;
        right: -16rpx;
        width: 32rpx;
        height: auto;
        z-index: 0;
      }
    }
  }
  .detail {
    margin-top: 30rpx;
    width: 100%;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 1.5;
    text-align: left;
  }
  .uploadBox {
    margin-top: 30rpx;
    width: 100%;
  }
}

.bottomBtn {
  position: fixed;
  bottom: 60rpx;
  width: 100%;
  padding: 0 30rpx;
  .bottomBtn-in {
    padding: 0;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-family: PingFang SC, sans-serif;
    font-weight: 800;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 20rpx;
  }
}

.uploadBox {
  width: 100%;
  .slot-btn {
    margin: 0 auto;
    width: 100%;
    .customBtn {
      width: 630rpx;
      height: 420rpx;
    }
  }
}
</style>
